<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>更新头像</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
<link rel="stylesheet" href="common/weui/css/weui.min.css">
<link rel="stylesheet" href="common/amazeui/css/amazeui.min.css" />
<link rel="stylesheet" href="common/cropper-master/dist/cropper.css">
<script src="common/amazeui/js/jquery.min.js"></script>
<script src="common/amazeui/js/amazeui.min.js"></script>
<script src="common/cropper-master/dist/cropper.js"></script>
<script src="common/weui/js/weui.min.js"></script>
<script  src="common/js/jquery.form.min.js"></script> 
<style>
    .container {
      max-width: 640px;
      margin: 20px auto;
    }

    img {
      max-width: 100%;
    }
    /* Override Cropper's styles */
    .cropper-view-box,
    .cropper-face {
      border-radius: 50%;
    }
  </style>
</head>
<body >


<div class="am-text-center" >
 <img  src="common/avatar/default_0.png"  />
   <img class="am-circle" src="common/avatar/default_0.png"  />
   
   <form action="up?action=uploadimage" enctype="multipart/form-data" method="post" id="upload_form">
      <div class="am-form-group am-form-file">
	  <button type="button" class="am-btn am-btn-danger am-btn-xs am-fr">
	    <i class="am-icon-camera"></i> 上传头像</button>
	  <input id="upload_file" name="upfile" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" multiple>
	 </div>
    </form>
</div>

<div class="am-modal " tabindex="-1" id="my-confirm">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">图片剪切
      <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
    </div>
    <div class="am-modal-bd">

    <div >
      <img id="image" src="common/avatar/default_0.png" alt="Picture">
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn" onclick="save()">确定</span>
    </div>  
  </div>
      
   
  </div>
</div>




 <script>
    function getRoundedCanvas(sourceCanvas) {
      var canvas = document.createElement('canvas');
      var context = canvas.getContext('2d');
      var width = sourceCanvas.width;
      var height = sourceCanvas.height;	  
      canvas.width = width;
      canvas.height = height;
      context.beginPath();
      context.arc(width / 2, height / 2, Math.min(width, height), 0, 2 * Math.PI);
      context.strokeStyle = 'rgba(0,0,0,0)';
      context.stroke();
      context.clip();
      context.drawImage(sourceCanvas, 0, 0, width, height);

      return canvas;
    }

    function save()
    {
    	var $image = $('#image');
    	 var croppedCanvas;
         var roundedCanvas;
         croppedCanvas = $image.cropper('getCroppedCanvas');
         roundedCanvas = getRoundedCanvas(croppedCanvas);
         alert( roundedCanvas.toDataURL() );
    }
    

    var loading ;
    $('#upload_file').on('change', function () { 
    	  $("#upload_form").ajaxSubmit({
    	    url:'api/upload?action=uploadimage', 
    	    beforeSubmit:function(){
    	    	loading =weui.loading('数据加载中...'); 
    	    },
    	    success: function(json) {
    	      
    	       if(json.state=="SUCCESS")
    	       {
    	    	   if(loading) loading.hide();
    	    	   var $image = $('#image');
    	    	   $image.attr("src","/iask"+json.url);
    	    	   $image.cropper({
    	    	        aspectRatio: 1,
    	    	        viewMode: 1,
    	    	        minContainerWidth: 380,
    	    	        minContainerHeight: 240,
    	    	        ready: function () {
    	    	          croppable = true;
    	    	        }
    	    	   });
    	    	   $('#my-confirm').modal({
    	    		   closeViaDimmer: 0,
    	    		    width: 400});
    	         
    	       }else
    	       {
    	    	   if(loading) loading.hide();
   	    			weui.alert(json.state); 
    
    	       }
    	    }
    	  });

    	});







    
  </script>
<!--  
<div id="main" style="height:400px;">
<form action="up?action=uploadimage" enctype="multipart/form-data" method="post">



 <div class="am-form-group am-form-file">
     <div class="tpl-form-file-img">
          <img src="common/cropper-master/examples/crop-avatar/images/picture.jpg" alt="">
    </div>
    <button type="button" class="am-btn am-btn-danger am-btn-sm">
    <i class="am-icon-cloud-upload"></i> 更新头像</button>
     <input id="doc-form-file" type="file" multiple="">
 </div>

<input type="submit"> 
</form>

</div>
-->
</body>
</html>